<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>表单页</title>
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
</head>

<body>
    <div class="demo-content">
        <!-- 搜索页 ================================================== -->
        <h2>示例</h2>
        <form id="searchForm" class="form-horizontal" tabindex="0" style="outline: none;">
            <div class="control-group">
                <label class="control-label">
                    <s>*</s>供应商编码：</label>
                <div class="controls">
                    <input type="text" name="id" class="control-text">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">
                    <s>*</s>供应商名称：</label>
                <div class="controls">
                    <input type="text" name="name" class="control-text">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">
                    <s>*</s>供应商费用：</label>
                <div class="controls">
                    <input type="text" name="fee" class="control-text">
                </div>
            </div>
            <div class="row actions-bar">
                <div class="form-actions span13 offset3">
                    <button type="submit" class="button button-primary">保存</button>
                </div>
            </div>
        </form>
        <form id="editForm" class="form-horizontal" tabindex="0" style="outline: none;">
            <div class="control-group">
                <label class="control-label">
                    <s>*</s>供应商编码：</label>
                <div class="controls">
                    <input type="text" name="id" class="control-text">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">
                    <s>*</s>供应商名称：</label>
                <div class="controls">
                    <input type="text" name="name" class="control-text">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">
                    <s>*</s>供应商费用：</label>
                <div class="controls">
                    <input type="text" name="fee" class="control-text">
                </div>
            </div>
            <div class="row actions-bar">
                <div class="form-actions span13 offset3">
                    <button type="submit" class="button button-primary">保存</button>
                </div>
            </div>
        </form>
        <h2>实例</h2>
        <div id="grid">
        </div>
        <script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script>
        <script src="http://g.alicdn.com/bui/bui/1.1.21/bui.js"></script>
        <!-- script start -->
        <script type="text/javascript">
        var Grid = BUI.Grid,
            Data = BUI.Data;
        var Grid = Grid,
            Store = Data.Store,
            columns = [{
                    title: '供应商编码',
                    dataIndex: 'id'
                }, //editor中的定义等用于 BUI.Form.Field.Text的定义
                {
                    title: '供应商名称',
                    dataIndex: 'name'
                }, {
                    title: '供应商费用',
                    dataIndex: 'fee'
                }, {
                    title: '操作',
                    dataIndex: 'id',
                    renderer: function(value) {
                        return '<a  href="javascript:update(\'' + value + '\')">编辑</a>' + '<a  href="javascript:del(\'' + value + '\')">删除</a>';
                    }
                }
            ];

        function update(i) {
           var record = store.find("id",i);
            var form = $('#searchForm')[0];
            BUI.FormHelper.setFields(form, record);
        }

        function del(i) {
            var record = store.find("id",i);
            store.remove(record);
        }


        var store = new Store({
                autoLoad: true
            }),
            grid = new Grid.Grid({
                render: '#grid',
                columns: columns,
                width: 700,
                forceFit: true,
                store: store
            });

        grid.render();

        var addForm = new BUI.Form.Form({
            srcNode: '#searchForm'
        });
        addForm.render();
        addForm.on("beforesubmit", function() {
            // var isValid = addForm.isValid();
            var record = addForm.serializeToObject();
            store.add(record);
            return false;
        });
        </script>
        <!-- script end -->
    </div>
</body>

</html>
